<template>
  <div ref="chartDom" :style="{ width: '100%', height: '400px' }"></div>
</template>

<script setup>
import * as echarts from 'echarts'
import { onMounted, ref, watch } from 'vue'

// 接收传入的开始年份和结束年份
const props = defineProps({
  startYear: {
    type: Number,
    required: true
  },
  endYear: {
    type: Number,
    required: true
  }
})

const chartDom = ref()
let chart

const initChart = (filteredDataIn, filteredDataOut) => {
  chart = echarts.init(chartDom.value)
  chart.setOption({
    title: {
      text: `年度流失与新增客户数量统计 (${props.startYear} - ${props.endYear})`,
      left: 'center'
    },
    tooltip: {
      show: true,
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
    },
    legend: {
      left: 'left'
    },
    xAxis: {
      name: '人数',
      type: 'value'
    },
    yAxis: {
      name: '年份',
      type: 'category',
      data: filteredDataIn.years, 
      axisLabel: {
        interval: 0,
      }
    },
    toolbox: {
      show: true,
      feature: {
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    series: [
      {
        name: '新增',
        type: 'bar',
        stack: '总量',
        label: {
          show: true,
        },
        emphasis: {
          focus: 'series'
        },
        data: filteredDataIn.annualCounts, // 过滤后的数据
        itemStyle: {
          color: '#28A1FFB3'
        }
      },
      {
        name: '流失',
        type: 'bar',
        stack: '总量',
        label: {
          show: true,
        },
        emphasis: {
          focus: 'series'
        },
        data: filteredDataOut.annualCounts, // 过滤后的数据
        itemStyle: {
          color: '#9a9a9a'
        }
      }
    ]
  })
}

// 过滤年度新增人数
const filterDataByYearRangeIn = (startYear, endYear) => {
// 模拟过滤后的年度数据
const allData = {
  2024: 709,
  2023: 635,
  2022: 637,
  2021: 620,
  2020: 654
}

const years = []
const annualCounts = []

for (let year = startYear; year <= endYear; year++) {
  if (allData[year]) {
    years.push(year)
    annualCounts.push(allData[year])
  }
}

return { years, annualCounts }
}

// 过滤年度流失人数
const filterDataByYearRangeOut = (startYear, endYear) => {
  // 模拟过滤后的年度数据
  const allData = {
    2024: -593,
    2023: -621,
    2022: -588,
    2021: -594,
    2020: -577
  }

  const years = []
  const annualCounts = []

  for (let year = startYear; year <= endYear; year++) {
    if (allData[year]) {
      years.push(year)
      annualCounts.push(allData[year])
    }
  }

  return { years, annualCounts }
}

watch(() => [props.startYear, props.endYear], ([newStartYear, newEndYear]) => {
  const filteredDataIn = filterDataByYearRangeIn(newStartYear, newEndYear)
  const filteredDataOut = filterDataByYearRangeOut(newStartYear, newEndYear)
  initChart(filteredDataIn, filteredDataOut)
})

onMounted(() => {
  const filteredDataIn = filterDataByYearRangeIn(props.startYear, props.endYear)
  const filteredDataOut = filterDataByYearRangeOut(props.startYear, props.endYear)
  initChart(filteredDataIn, filteredDataOut)
})
</script>

<style scoped>
/* Add any specific styles here */
</style>
